<template>
  <div>
    <table border="1" cellspacing="0">
      <tr v-for="goods in goodslist" :class="{on:goods.id%2 == 0,off:goods.id%2 != 0}">
        <td>{{goods.id}}</td>
        <td>{{goods.name}}</td>
        <td>{{goods.price}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: "Show",
    data: function () {
      return {
        goodslist: []
      }
    },
    mounted() {
      axios({
        url: 'http://localhost:8000/myapp/show/',
        method: 'get'
      }).then(res => {
        console.log(res.data)
        this.goodslist = res.data.data
      })
    }
  }
</script>

<style scoped>
  .on {
    background: aquamarine;
  }

  .off {
    background: cornflowerblue;
  }
</style>
